<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Loader</title>
	<link rel="stylesheet" href="css/loading.css"	  type="text/css" media="all">
	<style>
		#web_bg {
		  position:fixed;
		  top: 0;
		  left: 0;
		  width:100%;
		  height:100%;
		  min-width: 1000px;
		  z-index:-10;
		  zoom: 1;
		  background-color: #ccc;
          background-image: url(./img/bg.jpg);
		  background-repeat: no-repeat;
		  background-size: cover;
		  -webkit-background-size: cover;
		  -o-background-size: cover;
		  background-position: center 0;
		}
		
		.logo {
			position:absolute;
			float:left;
			margin-top:50px;
			left:100px;
		}
		
		#logo {
			height:60px;
		}
		
		.service-item {
			min-height: 115px;
			width: 50%;
			background-color: rgb(237 237 237 / 51%);
			top: 50%;
			left: 25%;
			border: 2px solid #EDEDED;
			position: absolute;
			padding: 30px 30px;
		}
	</style>		
</head>
<body>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg"></div>
    <!--其他代码 ... -->
	<div class="logo">
		<span style="font-size:36px; color:white;"><img id="logo" src="./img/logo.png"><b style="margin-left:30px;">健康评估与康复筛查客户端</b></span>
	</div>
	
	<div id="loading">
		<div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
		</div>
	</div>
	<div class="service-item" id="warning_info" style="display:none;">
		<h1 class="text-info" style="margin-top:20px;color:#e74c3c; text-align:center;">网络连接错误</h1>
		<p class="text-black" id="local_link" style="margin-top:20px;font-size:22px;display:none;">本地网络连接失败.</p>
		<p class="text-black" id="server_link" style="margin-top:20px;font-size:22px;display:none;">与服务端连接失败.</p>
	</div>
</div>

	<!-- Default-JavaScript -->   <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<!-- Bootstrap-JavaScript --> <script type="text/javascript" src="js/bootstrap.js"></script>

	<script>
	
		window.onload=function onLine(callback){
			var img = new Image();
			img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
			
			if(navigator.onLine){
				console.log('本地网络连接成功');
				img.onload=function(){
					console.log('网络畅通');
					setTimeout(function() {
					  $('body').addClass('loaded'); 
					}, 1000);
					top.location="https://madmaxchow.github.io/VLOOK/index.html";
				};
				img.onerror=function(){
					console.log('无法连接互联网');
					setTimeout(function() {
					  $('body').addClass('loaded'); 
					}, 1000);
					$('#warning_info').show();
					$('#server_link').show();
				}
			}else{
				setTimeout(function() {
				  $('body').addClass('loaded'); 
				}, 1000);
				$('#warning_info').show();
				$('#local_link').show();
				console.log('本地网络连接失败');
			};
		}		
	</script>

</body>
</html>